<template>
  <div class="header">
      <Theader />
  </div>
  <div class="banner">
<TBanner/>
<h2 @click="test">
    推荐歌单
</h2>
<div>
<div class="reo_list">
<div class="list_item" v-for="(item,index) in listData">
<img :src="item.picUrl" alt="" class="list_img" @click="playList(item)">
  <span>{{item.name}}</span>
</div>
</div>
</div>
  </div>
</template>

<script lang="ts" setup>
import Theader from '../main/cop/header.vue'
import TBanner from '@/base-ui/TBanner/src/TBanner.vue';

import { useStore } from '@/store';
import {getpersonalized,getSongsDetail } from '@/service/album/album'
import {useRouter} from 'vue-router'

import  { ref} from 'vue'


const store = useStore()

const router = useRouter()
const listData = ref([] as any)
const test = async ()=>{
  const randomS = Math.floor(Math.random() * 19)
  const randomE = Number(randomS + 10)
  await getpersonalized().then((res)=>{
    listData.value = res.result.slice(randomS,randomE)
  console.log(listData.value);

  })
}

test()

const playList =  async({id}: any)=>{
 await store.dispatch('songListInfo/getSongListInfo', id)
  router.push('/songInfo')

}

</script>
<style lang="less" scoped>

.banner{
  margin: 20px 600px;
}

h2{
  margin-left: -200px;
  font-weight: 900;
}
.reo_list{
  width: 1200px;
  height: 510px;
  background-color: rgb(61, 102, 184);
  margin-left: -200px;
  .list_item{
    display: inline-block;
    border-radius: 10%;
    margin: 30px 18px;
    width: 200px;
    height: 180px;
    background-color: darkslategray;
    span{
      position:absolute;
      margin-top: 190px;
      padding-top: 5px;
      width: 190px;
      // background-color: rgb(158, 224, 191);
      font-size: 14px;
      margin-left: -200px;
      font-weight: 560;
      font-family: 'Times New Roman', Times, serif;
    }
  }
}
.list_img{
   border-radius: 15%;
  width: 200px;
  height: 190px;
  &:hover{
    transform: scale(1.1);
  }
}
</style>
